<template>
  <div
    class="context-menu"
    v-if="context.show"
    :style="{ top: context.style.top + 'px', left: context.style.left + 'px' }"
  >
    <ul>
      <li @click="handleClickContextMenu(0)">
        <i class="el-icon-close"></i><span>删除图层</span>
      </li>
      <li @click="handleClickContextMenu(1)">
        <i class="el-icon-top"></i><span>置顶图层</span>
      </li>
      <li @click="handleClickContextMenu(2)">
        <i class="el-icon-arrow-up"></i><span>上移一层</span>
      </li>
      <li @click="handleClickContextMenu(3)">
        <i class="el-icon-arrow-down"></i><span>下移一层</span>
      </li>
      <li @click="handleClickContextMenu(4)">
        <i class="el-icon-bottom"></i><span>置底图层</span>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    context: {
      type: [Object],
      default: () => {},
    },
  },
  methods: {
    handleClickContextMenu(type) {
      this.$emit("handleContextMenu", { type: type, index: this.context.index });
    },
  },
};
</script>
<style lang="stylus">
.context-menu {
  width: 120px;
  z-index: 20001;
  position: fixed;
  top: 200px;
  left: 200px;
  padding: 10px 0;
  box-shadow: 0 1px 3px #000;
  background: #212121;

  ul {
    list-style: none;

    li {
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #bcc8d5;
      font-size: 13px;
      cursor: pointer;

      &:hover {
        background-color: #2d2b2d;
      }

      span {
        display: inline-block;
        margin-left: 10px;
      }
    }
  }
}
</style>